---
import Layout from '@layouts/Layout.astro';
import Example from '@components/example-grid/Example';
import styles from '@pages-styles/example.module.scss';
import { Icon } from '@ag-website-shared/components/icon/Icon';
import DemoTabs from '@components/demos/DemosTabs.astro';
import LogoMark from '@components/logo/LogoMark';
---

<Layout
    title="Demo - Performance Grid"
    description="Example showing grid performance with adjustable rows and columns."
    showSearchBar={true}
    hideFooter={true}
>
    <div class={styles.topHeader}>
        <div>
            <div class={styles.headerTitle}>
                <h1 class={styles.headerHeading}>Performance</h1>
                <a className={styles.videoTour} href="https://youtu.be/bcMvTUVbMvI" target="_blank" rel="noreferrer">
                    <button class="button-secondary">
                        <Icon alt={`Youtube logo`} name="youtube" svgClasses={styles.youtubeIcon} />
                        <span>See the video tour</span>
                    </button>
                </a>
            </div>
            <p>Example showing grid performance with adjustable rows and columns.</p>
        </div>

        <DemoTabs activeTab="complete" />
    </div>
    <div class={styles.layout}>
        <div class={styles.layoutWrapper}>
            <div class={styles.loadingLogoContainer}>
                <LogoMark isSpinning />
            </div>
            <Example client:only="react" />
        </div>
    </div>
</Layout>
